<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				padding: 50px 0;
				border: 1px solid #000800;
			}
			div::after{
				content: '这是一个房子'
			}

			@media all and (max-width:1000px){
				div{
					background: #1177bb;
				}
				div::after{
					content: "哇，房子好大哦，可以放下炕了！";
				}
			}

			@media (max-width:800px){
				div{
					background: #aeaeae;
				}
				div::after{
					content: "喔，房子变小了，只能放一张双人床";
				}
			}

			@media (max-width:500px){
				div{
					background: #46ae46;
				}
				div::after{
					content: "哎，房子更小了，只能放一张单人床"
				}
			}
			@media (max-width:300px){
				div{
					background: #ff8cff;
				}
				div::after{
					content: "咦！房子也忒小了吧，床都放不下！";
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
